import '../test/test.js';
import '../../scss/test.scss';
import '../../scss/pim.scss';
import $ from '../jquery-3.4.1.min.js';
import ajax from '../utils/ajax.js';

$("#main").on('click', '#b-xiugaimima', function () {//修改密码
    $("#nav-change-password").show();
})
$("#main").on('click', '#b-xiugaiziliao', function () {//修改资料
    $("#main").html(`
    <div id="main-top">
                <div id="mt-left"><img src="" alt=""></div>
                <div id="mt-right">
                    <p>姓名: <input type="text" id='name'/></p>
                    <p>角色: <input type="text" id='role'/></p>
                    <p>电话: <input type="number" id='phone'/></p>
                    <p>录入时间: <input type="text" id='joinTime'/></p>
                    <p>工作照片:<input type="file" id="pim-photo"></p>
                    <button>
                        上传图片
                    </button>
                </div>
            </div>
            <div id="main-down">
                <div>
                    <p>性别:<input type="text" id='sex'/></p>
                </div>
                <div>
                    <p>年龄:<input type="text" id='age'/></p>
                </div>
                <div>
                    <p>学历:<input type="text" id='xueLi'/></p>
                </div>
                <div>
                    <p>身份证号码:<input type="number" id='IDcard'/></p>
                </div>
                <div>
                    <p>入职时间:<input type="text" id='workTime'/></p>
                </div>
            </div>
            <b class="pim-change" id="b-ok">确定修改</b>
            <b class="pim-change" style="top: 100px;" id="b-uok">取消修改</b>
    `);
})
$("#main").on('click', '#b-uok', function () {//取消修改
    location.href = '../../pim.html';
});
$("#main").on('click', '#b-ok', function () {//确认修改
    const name = $("#name").val();
    const role = $("#role").val();
    const iphone = $("#phone").val();
    const joinTime = $("#joinTime").val();
    const sex = $("#sex").val();
    const age = $("#age").val();
    const xueLi = $("#xueLi").val();
    const IDcard = $("#IDcard").val();
    const workTime = $("#workTime").val();
    const image = $("#mt-left img").attr('src');
    const _id = $("#main").attr('_id');
    if (name != '' || role != '' || iphone != '' || joinTime != '' || sex != '' || age != '' || xueLi != '' || IDcard != '' || workTime != '') {
        if (sex == '男' || sex == '女') {
            ajax({
                url: '/pjw-pim/changepim',
                type: 'POST',
                data: {
                    _id, name, role, iphone, joinTime, sex, age, xueLi, IDcard, workTime, image
                },
                success(res) {
                    if (res.code == 200) {
                        alert('成功');
                        location.href = '../../pim.html';
                    } else {
                        alert('失败');
                    }
                }
            })
        } else {
            alert('性别请输入男或女');
        }
    } else {
        alert('信息不能为空');
    }
});

async function showPim() {//渲染页面
    const PimData = await getPim();
    rendersPim(PimData);
}
function getPim() {//获得个人信息数据
    return new Promise((resolve, reject) => {
        ajax({
            url: '/pjw-pim/renderpim',
            type: 'GET',
            success(res) {
                console.log(res.result, '个人信息');
                var userID = localStorage.getItem('userID');//获取用户id
                const newData = res.result.filter(function (item, index) {
                    return item.userID == userID;
                })
                console.log(newData, '获得newData');
                if (newData == '') {
                    alert('请创建个人信息');
                    $("#main").html(`
                <div id="main-top">
                <div id="mt-left"><img src="" alt=""></div>
                <div id="mt-right">
                    <p>姓名: <input type="text" id='name'/></p>
                    <p>角色: <input type="text" id='role'/></p>
                    <p>电话: <input type="number" id='phone'/></p>
                    <p>录入时间: <input type="text" id='joinTime'/></p>
                    <p>工作照片:<input type="file" id="pim-photo"></p>
                    <button>
                        上传图片
                    </button>
                </div>
            </div>
            <div id="main-down">
                <div>
                    <p>性别:<input type="text" id='sex'/></p>
                </div>
                <div>
                    <p>年龄:<input type="text" id='age'/></p>
                </div>
                <div>
                    <p>学历:<input type="text" id='xueLi'/></p>
                </div>
                <div>
                    <p>身份证号码:<input type="number" id='IDcard'/></p>
                </div>
                <div>
                    <p>入职时间:<input type="text" id='workTime'/></p>
                </div>
            </div>
            <b class="pim-change" id="b-creat">创建信息</b>
            <b class="pim-change" style="top: 100px;" id="b-creatok">确认</b>
    `);

                } else {
                    resolve(newData);
                }
            }
        })
    })
}

$("#main").on('click', '#b-creatok', function () {//创建信息
    console.log(1111111111);
    const name = $("#name").val();
    const role = $("#role").val();
    const iphone = $("#phone").val();
    const joinTime = $("#joinTime").val();
    const sex = $("#sex").val();
    const age = $("#age").val();
    const xueLi = $("#xueLi").val();
    const IDcard = $("#IDcard").val();
    const workTime = $("#workTime").val();
    const image = $("#mt-left img").attr('src');
    const _id = $("#main").attr('_id');
    const userID = localStorage.getItem('userID');
    if (name != '' || role != '' || iphone != '' || joinTime != '' || sex != '' || age != '' || xueLi != '' || IDcard != '' || workTime != '') {
        if (sex == '男' || sex == '女') {
            ajax({
                url: '/pjw-pim/creatpim',
                type: 'POST',
                data: {
                    _id, name, role, iphone, joinTime, sex, age, xueLi, IDcard, workTime, image, userID
                },
                success(res) {
                    if (res.code == 200) {
                        alert('成功');
                        location.href = '../../pim.html';
                    } else {
                        alert('失败');
                    }
                }
            })
        } else {
            alert('性别请输入男或女');
        }
    } else {
        alert('信息不能为空');
    }
});
function rendersPim(newData) {//渲染个人信息数据
    $("#pim-name").text(newData[0].name);
    $("#pim-role").text(newData[0].role);
    $("#pim-phone").text(newData[0].iphone);
    $("#pim-joinTime").text(newData[0].joinTime);
    $("#pim-sex").text(newData[0].sex);
    $("#pim-age").text(newData[0].age);
    $("#pim-xueLi").text(newData[0].xueLi);
    $("#pim-IDcard").text(newData[0].IDcard);
    $("#pim-workTime").text(newData[0].workTime);
    $("#mt-left img").attr('src', `${newData[0].image}`);
    $("#main").attr('_id', `${newData[0]._id}`);
}
showPim();
$("#main").on('change', '#pim-photo', function (e) {//图片
    const files = e.target.files;
    console.log(files);
    const fd = new FormData();
    fd.append('file', files[0]);
    $.ajax({
        url: 'http://localhost:3100/pjw-pim/uploadImages',
        type: 'POST',
        data: fd,
        contentType: false,
        processData: false,
        cache: false,
        success(res) {
            console.log('前端上传结果', res);
            if (res.code == 200) {
                $('#mt-left img').attr('src', res.data);
            }
        }
    })
})
